<template>
	<view class="forgot-password-container">

		<view class="background-gradient">
			<view class="gradient-orb orb-1"></view>
			<view class="gradient-orb orb-2"></view>
			<view class="gradient-orb orb-3"></view>
		</view>
		
		<!-- 几何装饰元素 -->
		<view class="geometric-shapes">
			<view class="shape shape-1"></view>
			<view class="shape shape-2"></view>
			<view class="shape shape-3"></view>
			<view class="shape shape-4"></view>
		</view>
		
		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 品牌标识区域 -->
			<view class="brand-section">
				<view class="brand-logo">
					<view class="logo-icon">
						<text class="logo-text">SG3L</text>
					</view>
				</view>
				<view class="brand-info">
					<text class="brand-title">SG3L AI</text>
					<text class="brand-subtitle">智能问答系统</text>
				</view>
			</view>
			
			<!-- 忘记密码卡片 -->
			<view class="forgot-password-card">
				<!-- 步骤1: 选择验证方式 -->
				<view v-if="currentStep === 1" class="step-container">
					<view class="card-header">
						<text class="welcome-text">找回密码</text>
						<text class="sub-text">请选择验证方式</text>
					</view>
					
					<view class="form-container">
						<!-- 验证方式选择 -->
						<view class="verify-type-container">
							<view 
								class="verify-type-item" 
								:class="{ active: verifyType === 'phone' }"
								@click="selectVerifyType('phone')"
							>
								<view class="verify-icon">📱</view>
								<text class="verify-title">手机号验证</text>
								<text class="verify-desc">发送验证码到绑定手机</text>
							</view>
							
							<view 
								class="verify-type-item" 
								:class="{ active: verifyType === 'email' }"
								@click="selectVerifyType('email')"
							>
								<view class="verify-icon">📧</view>
								<text class="verify-title">邮箱验证</text>
								<text class="verify-desc">发送验证码到绑定邮箱</text>
							</view>
						</view>
						
						<!-- 用户名输入框 -->
						<view class="input-wrapper">
							<view class="input-icon">
								<text class="icon">👤</text>
							</view>
							<input 
								class="form-input" 
								v-model="formData.username" 
								placeholder="请输入用户名"
								type="text"
								:disabled="isLoading"
								@input="onUsernameInput"
							/>
						</view>
						
						<!-- 账号输入框 -->
						<view class="input-wrapper">
							<view class="input-icon">
								<text class="icon">{{ verifyType === 'phone' ? '📱' : '📧' }}</text>
							</view>
							<input 
								class="form-input" 
								v-model="formData.account" 
								:placeholder="verifyType === 'phone' ? '请输入手机号' : '请输入邮箱地址'"
								:type="verifyType === 'phone' ? 'number' : 'text'"
								:maxlength="verifyType === 'phone' ? '11' : '50'"
								:disabled="isLoading"
								@input="onAccountInput"
							/>
						</view>
						
						<!-- 下一步按钮 -->
						<button 
							class="next-btn" 
							:class="{ disabled: !canProceed || isLoading }"
							:disabled="!canProceed || isLoading"
							@click="goToNextStep"
						>
							<view class="btn-content">
								<view v-if="isLoading" class="loading-spinner"></view>
								<text class="btn-text">{{ isLoading ? '发送中...' : '下一步' }}</text>
							</view>
						</button>
					</view>
				</view>
				
				<!-- 步骤2: 输入验证码 -->
				<view v-if="currentStep === 2" class="step-container">
					<view class="card-header">
						<text class="welcome-text">输入验证码</text>
						<text class="sub-text">
							验证码已发送至 {{ verifyType === 'phone' ? '手机号' : '邮箱' }}
							<text class="highlight">{{ maskedAccount }}</text>
						</text>
					</view>
					
					<view class="form-container">
						<!-- 验证码输入 -->
						<view class="input-wrapper">
							<view class="input-icon">
								<text class="icon">🔢</text>
							</view>
							<input 
								class="form-input" 
								v-model="formData.verifyCode" 
								placeholder="请输入6位验证码"
								type="number"
								maxlength="6"
								:disabled="isLoading"
								@input="onVerifyCodeInput"
							/>
							<view class="input-action" @click="resendCode" v-if="!isCountdown">
								<text class="action-text">重新发送</text>
							</view>
							<view class="input-action" v-else>
								<text class="countdown-text">{{ countdown }}s</text>
							</view>
						</view>
						
						<!-- 按钮组 -->
						<view class="button-group">
							<!-- 返回上一步按钮 -->
							<button class="back-step-btn" @click="goToPreviousStep">
								<text class="btn-text">上一步</text>
							</button>
							
							<!-- 验证按钮 -->
							<button 
								class="verify-btn" 
								:class="{ disabled: !canVerify || isLoading }"
								:disabled="!canVerify || isLoading"
								@click="verifyCode"
							>
								<view class="btn-content">
									<view v-if="isLoading" class="loading-spinner"></view>
									<text class="btn-text">{{ isLoading ? '验证中...' : '验证' }}</text>
								</view>
							</button>
						</view>
					</view>
				</view>
				
				<!-- 步骤3: 设置新密码 -->
				<view v-if="currentStep === 3" class="step-container">
					<view class="card-header">
						<text class="welcome-text">设置新密码</text>
						<text class="sub-text">请设置您的新密码</text>
					</view>
					
					<view class="form-container">
						<!-- 新密码输入 -->
						<view class="input-wrapper">
							<view class="input-icon">
								<text class="icon">🔐</text>
							</view>
							<input 
								class="form-input" 
								v-model="formData.newPassword" 
								placeholder="请输入新密码（6-20位）"
								:type="showNewPassword ? 'text' : 'password'"
								:disabled="isLoading"
								@input="onNewPasswordInput"
							/>
							<view class="input-action" @click="toggleNewPassword">
								<text class="action-icon">{{ showNewPassword ? '🙈' : '👁️' }}</text>
							</view>
						</view>
						
						<!-- 确认新密码输入 -->
						<view class="input-wrapper">
							<view class="input-icon">
								<text class="icon">🔒</text>
							</view>
							<input 
								class="form-input" 
								v-model="formData.confirmPassword" 
								placeholder="请确认新密码"
								:type="showConfirmPassword ? 'text' : 'password'"
								:disabled="isLoading"
								@input="onConfirmPasswordInput"
							/>
							<view class="input-action" @click="toggleConfirmPassword">
								<text class="action-icon">{{ showConfirmPassword ? '🙈' : '👁️' }}</text>
							</view>
						</view>
						
						<!-- 密码强度提示 -->
						<view class="password-strength" v-if="formData.newPassword">
							<view class="strength-label">密码强度：</view>
							<view class="strength-bar">
								<view class="strength-item" :class="{ active: passwordStrength >= 1 }"></view>
								<view class="strength-item" :class="{ active: passwordStrength >= 2 }"></view>
								<view class="strength-item" :class="{ active: passwordStrength >= 3 }"></view>
							</view>
							<text class="strength-text">{{ strengthText }}</text>
						</view>
						
						<!-- 按钮组 -->
						<view class="button-group">
							<!-- 返回上一步按钮 -->
							<button class="back-step-btn" @click="goToPreviousStep">
								<text class="btn-text">上一步</text>
							</button>
							
							<!-- 确认修改按钮 -->
							<button 
								class="confirm-btn" 
								:class="{ disabled: !canConfirm || isLoading }"
								:disabled="!canConfirm || isLoading"
								@click="resetPassword"
							>
								<view class="btn-content">
									<view v-if="isLoading" class="loading-spinner"></view>
									<text class="btn-text">{{ isLoading ? '修改中...' : '确认修改' }}</text>
								</view>
							</button>
						</view>
					</view>
				</view>
				
				<!-- 步骤4: 完成结果 -->
				<view v-if="currentStep === 4" class="step-container">
					<view class="result-container">
						<view class="result-icon success">
							<text class="icon-text">✅</text>
						</view>
						<text class="result-title">密码重置成功</text>
						<text class="result-desc">您的密码已成功重置，请使用新密码登录</text>
						
						<button class="back-login-btn" @click="goToLogin">
							<text class="btn-text">返回登录</text>
						</button>
					</view>
				</view>
				
				<!-- 返回登录提示 -->
				<view class="login-prompt" v-if="currentStep < 4">
					<text class="prompt-text">记起密码了？</text>
					<text class="login-link" @click="goToLogin">返回登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref, computed, onMounted, onBeforeUnmount } from 'vue';
	import { authApi } from '@/api/auth';
	
	// 响应式数据
	const currentStep = ref(1); // 1:选择验证方式 2:输入验证码 3:设置新密码 4:完成结果
	const verifyType = ref('phone'); // phone 或 email
	
	const formData = reactive({
		username: '', // 用户名
		account: '', // 手机号或邮箱
		verifyCode: '',
		newPassword: '',
		confirmPassword: ''
	});
	
	const showNewPassword = ref(false);
	const showConfirmPassword = ref(false);
	const isLoading = ref(false);
	const countdown = ref(60);
	const isCountdown = ref(false);
	const timer = ref(null);
	const userInfo = ref(null);
	
	// 计算属性
	const canProceed = computed(() => {
		if (!verifyType.value || !formData.username.trim() || !formData.account.trim()) return false;
		
		if (verifyType.value === 'phone') {
			return isValidPhone(formData.account);
		} else {
			return isValidEmail(formData.account);
		}
	});
	
	const canVerify = computed(() => {
		return formData.verifyCode.trim().length === 6;
	});
	
	const canConfirm = computed(() => {
		return formData.newPassword.trim() && 
			   formData.confirmPassword.trim() &&
			   formData.newPassword === formData.confirmPassword &&
			   formData.newPassword.length >= 6;
	});
	
	const maskedAccount = computed(() => {
		if (verifyType.value === 'phone') {
			return formData.account.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
		} else {
			const parts = formData.account.split('@');
			if (parts.length === 2) {
				const username = parts[0];
				const domain = parts[1];
				const maskedUsername = username.substring(0, 2) + '***' + username.substring(username.length - 1);
				return maskedUsername + '@' + domain;
			}
		}
		return formData.account;
	});
	
	const passwordStrength = computed(() => {
		const password = formData.newPassword;
		if (!password) return 0;
		
		let strength = 0;
		
		// 长度检查
		if (password.length >= 6) strength++;
		if (password.length >= 10) strength++;
		
		// 复杂度检查
		if (/[a-zA-Z]/.test(password) && /[0-9]/.test(password)) strength++;
		if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength++;
		
		return Math.min(strength, 3);
	});
	
	const strengthText = computed(() => {
		switch (passwordStrength.value) {
			case 0: return '密码强度过低';
			case 1: return '密码强度较弱';
			case 2: return '密码强度中等';
			case 3: return '密码强度较强';
			default: return '';
		}
	});
	
	// 方法
	const selectVerifyType = (type) => {
		verifyType.value = type;
		formData.account = ''; // 清空账号输入
	};
	
	const onUsernameInput = (e) => {
		formData.username = e.detail.value;
	};
	
	const onAccountInput = (e) => {
		formData.account = e.detail.value;
	};
	
	const onVerifyCodeInput = (e) => {
		formData.verifyCode = e.detail.value;
	};
	
	const onNewPasswordInput = (e) => {
		formData.newPassword = e.detail.value;
	};
	
	const onConfirmPasswordInput = (e) => {
		formData.confirmPassword = e.detail.value;
	};
	
	const toggleNewPassword = () => {
		showNewPassword.value = !showNewPassword.value;
	};
	
	const toggleConfirmPassword = () => {
		showConfirmPassword.value = !showConfirmPassword.value;
	};
	
	const isValidPhone = (phone) => {
		const phoneRegex = /^1[3-9]\d{9}$/;
		return phoneRegex.test(phone);
	};
	
	const isValidEmail = (email) => {
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		return emailRegex.test(email);
	};
	
	const goToNextStep = () => {
		if (!canProceed.value || isLoading.value) return;
		
		isLoading.value = true;
		
		// 模拟发送验证码的过程
		setTimeout(() => {
			uni.showToast({
				title: '验证码已发送',
				icon: 'success'
			});
			
			currentStep.value = 2;
			startCountdown();
			isLoading.value = false;
		}, 1000);
	};
	
	const goToPreviousStep = () => {
		if (currentStep.value > 1) {
			currentStep.value = currentStep.value - 1;
			
			// 如果回到步骤1，清除倒计时
			if (currentStep.value === 1) {
				isCountdown.value = false;
				if (timer.value) {
					clearInterval(timer.value);
				}
			}
		}
	};
	
	const verifyCode = async () => {
		if (!canVerify.value || isLoading.value) return;
		
		isLoading.value = true;
		
		try {
			// 验证身份数据
			const verifyData = {
				username: formData.username
			};

			if (verifyType.value === 'email') {
				verifyData.email = formData.account;
			} else if (verifyType.value === 'phone') {
				verifyData.phoneNumber = formData.account;
			}

			// 调用验证身份接口获取用户信息
			const userData = await authApi.verifyIdentity(verifyData);
			
			// 模拟验证码校验（实际项目中需要验证码服务）
			if (formData.verifyCode !== '123456') {
				throw new Error('验证码错误');
			}
			
			// 保存用户信息用于下一步
			userInfo.value = userData;
			
			uni.showToast({
				title: '验证成功',
				icon: 'success'
			});
			
			currentStep.value = 3;
			
		} catch (error) {
			console.error('验证失败:', error);
			
			let errorMessage = '验证失败，请重试';
			if (error.status === 404) {
				errorMessage = '用户不存在';
			} else if (error.status === 400) {
				errorMessage = error.message || '用户名与邮箱/手机号不匹配';
			} else if (error.message) {
				errorMessage = error.message;
			}
			
			uni.showToast({
				title: errorMessage,
				icon: 'error'
			});
		} finally {
			isLoading.value = false;
		}
	};
	
	const resetPassword = async () => {
		if (!canConfirm.value || isLoading.value) return;
		
		isLoading.value = true;
		
		try {
			// 表单验证
			if (!validatePasswordForm()) {
				return;
			}
			
			// 检查是否有用户信息
			if (!userInfo.value || !userInfo.value.id) {
				throw new Error('用户信息获取失败，请重新验证');
			}
			
			// 调用重置密码API
			await authApi.resetPassword({
				userId: userInfo.value.id,
				newPassword: formData.newPassword,
				verifyCode: formData.verifyCode || '123456'
			});
			
			currentStep.value = 4;
			
		} catch (error) {
			console.error('重置失败:', error);
			
			let errorMessage = '重置失败，请重试';
			if (error.status === 404) {
				errorMessage = '用户不存在';
			} else if (error.status === 400) {
				errorMessage = error.message || '密码格式不正确或验证码错误';
			} else if (error.message) {
				errorMessage = error.message;
			}
			
			uni.showToast({
				title: errorMessage,
				icon: 'error'
			});
		} finally {
			isLoading.value = false;
		}
	};
	
	const validatePasswordForm = () => {
		if (!formData.newPassword.trim()) {
			uni.showToast({
				title: '请输入新密码',
				icon: 'error'
			});
			return false;
		}
		
		if (formData.newPassword.length < 6) {
			uni.showToast({
				title: '密码至少6位',
				icon: 'error'
			});
			return false;
		}
		
		if (formData.newPassword.length > 20) {
			uni.showToast({
				title: '密码最多20位',
				icon: 'error'
			});
			return false;
		}
		
		if (!formData.confirmPassword.trim()) {
			uni.showToast({
				title: '请确认新密码',
				icon: 'error'
			});
			return false;
		}
		
		if (formData.newPassword !== formData.confirmPassword) {
			uni.showToast({
				title: '两次密码不一致',
				icon: 'error'
			});
			return false;
		}
		
		return true;
	};
	
	const startCountdown = () => {
		isCountdown.value = true;
		countdown.value = 60;
		
		timer.value = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				isCountdown.value = false;
				clearInterval(timer.value);
			}
		}, 1000);
	};
	
	const sendVerifyCode = async () => {
		if (isCountdown.value) return;
		
		isLoading.value = true;
		
		try {
			// 先验证用户身份信息
			const verifyData = {
				username: formData.username
			};

			if (verifyType.value === 'email') {
				verifyData.email = formData.account;
			} else if (verifyType.value === 'phone') {
				verifyData.phoneNumber = formData.account;
			}

			// 调用验证身份接口
			await authApi.verifyIdentity(verifyData);
			
			// 模拟发送验证码（实际项目中需要集成短信/邮件服务）
			await new Promise(resolve => setTimeout(resolve, 1000));
			
			uni.showToast({
				title: '验证码已发送',
				icon: 'success'
			});
			
			startCountdown();
			
		} catch (error) {
			console.error('发送验证码失败:', error);
			
			let errorMessage = '发送失败，请重试';
			if (error.status === 404) {
				errorMessage = '用户不存在';
			} else if (error.status === 400) {
				errorMessage = error.message || '用户名与邮箱/手机号不匹配';
			} else if (error.message) {
				errorMessage = error.message;
			}
			
			uni.showToast({
				title: errorMessage,
				icon: 'error'
			});
		} finally {
			isLoading.value = false;
		}
	};
	
	const resendCode = async () => {
		await sendVerifyCode();
	};
	
	const goToLogin = () => {
		uni.navigateBack();
	};
	
	// 生命周期
	onMounted(() => {
		console.log('ForgotPassword页面已挂载');
	});
	
	onBeforeUnmount(() => {
		if (timer.value) {
			clearInterval(timer.value);
		}
	});
</script>

<style scoped>
	.forgot-password-container {
		min-height: 100vh;
		position: relative;
		overflow: hidden;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	
	.background-gradient {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	
	.gradient-orb {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(20rpx);
		animation: float 8s ease-in-out infinite;
	}
	
	.orb-1 {
		width: 300rpx;
		height: 300rpx;
		top: 10%;
		left: -100rpx;
		animation-delay: 0s;
	}
	
	.orb-2 {
		width: 200rpx;
		height: 200rpx;
		top: 60%;
		right: -50rpx;
		animation-delay: 2s;
	}
	
	.orb-3 {
		width: 150rpx;
		height: 150rpx;
		bottom: 20%;
		left: 50%;
		animation-delay: 4s;
	}
	
	.geometric-shapes {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	
	.shape {
		position: absolute;
		background: rgba(255, 255, 255, 0.05);
		border: 1rpx solid rgba(255, 255, 255, 0.1);
	}
	
	.shape-1 {
		width: 100rpx;
		height: 100rpx;
		top: 15%;
		right: 20%;
		transform: rotate(45deg);
		animation: rotate 10s linear infinite;
	}
	
	.shape-2 {
		width: 80rpx;
		height: 80rpx;
		bottom: 30%;
		left: 15%;
		border-radius: 50%;
		animation: pulse 6s ease-in-out infinite;
	}
	
	.shape-3 {
		width: 60rpx;
		height: 60rpx;
		top: 40%;
		left: 10%;
		clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
		animation: bounce 8s ease-in-out infinite;
	}
	
	.shape-4 {
		width: 120rpx;
		height: 40rpx;
		bottom: 15%;
		right: 25%;
		border-radius: 20rpx;
		animation: slide 12s ease-in-out infinite;
	}
	
	.main-content {
		position: relative;
		z-index: 5;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	
	.brand-section {
		text-align: center;
		margin-bottom: 60rpx;
		margin-top: 80rpx;
	}
	
	.brand-logo {
		margin-bottom: 40rpx;
	}
	
	.logo-icon {
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 15rpx 40rpx rgba(79, 172, 254, 0.3);
		position: relative;
		overflow: hidden;
	}
	
	.logo-icon::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		animation: shine 3s ease-in-out infinite;
	}
	
	.logo-text {
		color: white;
		font-size: 48rpx;
		font-weight: 900;
		text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	}
	
	.brand-info {
		text-align: center;
	}
	
	.brand-title {
		display: block;
		color: white;
		font-size: 48rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
		text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	}
	
	.brand-subtitle {
		display: block;
		color: rgba(255, 255, 255, 0.8);
		font-size: 28rpx;
		font-weight: 400;
	}
	
	.forgot-password-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 30rpx;
		padding: 50rpx 35rpx;
		backdrop-filter: blur(20rpx);
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		margin-top: 20rpx;
	}
	
	.card-header {
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.welcome-text {
		display: block;
		font-size: 44rpx;
		font-weight: 700;
		color: #2c3e50;
		margin-bottom: 15rpx;
	}
	
	.sub-text {
		display: block;
		font-size: 26rpx;
		color: #7f8c8d;
		line-height: 1.4;
	}
	
	.form-container {
		flex: 1;
	}
	
	.step-container {
		width: 100%;
	}
	
	.verify-type-container {
		margin-bottom: 30rpx;
		display: flex;
		gap: 20rpx;
	}
	
	.verify-type-item {
		flex: 1;
		padding: 30rpx 20rpx;
		background: #f8f9fa;
		border: 2rpx solid #e9ecef;
		border-radius: 20rpx;
		text-align: center;
		transition: all 0.3s ease;
		cursor: pointer;
	}
	
	.verify-type-item.active {
		border-color: #667eea;
		background: rgba(102, 126, 234, 0.05);
		box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
	}
	
	.verify-icon {
		font-size: 40rpx;
		margin-bottom: 12rpx;
	}
	
	.verify-title {
		display: block;
		font-size: 28rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 6rpx;
	}
	
	.verify-desc {
		display: block;
		font-size: 22rpx;
		color: #7f8c8d;
		line-height: 1.3;
	}
	
	.highlight {
		color: #667eea;
		font-weight: 600;
	}
	
	.input-wrapper {
		position: relative;
		margin-bottom: 30rpx;
		background: #f8f9fa;
		border-radius: 20rpx;
		border: 2rpx solid #e9ecef;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		padding: 0 25rpx;
		pointer-events: auto;
		min-height: 100rpx;
		box-sizing: border-box;
	}
	
	.input-wrapper:focus-within {
		border-color: #667eea;
		box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
		background: white;
	}
	
	.input-icon {
		margin-right: 20rpx;
	}
	
	.icon {
		font-size: 32rpx;
		color: #6c757d;
	}
	
	.form-input {
		flex: 1;
		border: none !important;
		outline: none !important;
		background: transparent !important;
		font-size: 30rpx;
		color: #2c3e50;
		padding: 28rpx 0;
		cursor: text;
		user-select: text;
		-webkit-user-select: text;
		pointer-events: auto;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		line-height: normal;
	}
	
	.form-input::placeholder {
		color: #adb5bd;
	}
	
	.input-action {
		padding: 10rpx;
		cursor: pointer;
	}
	
	.action-icon {
		font-size: 32rpx;
		color: #6c757d;
	}
	
	.action-text {
		font-size: 24rpx;
		color: #667eea;
		font-weight: 600;
	}
	
	.countdown-text {
		font-size: 24rpx;
		color: #6c757d;
	}
	
	.password-strength {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 0 10rpx;
	}
	
	.strength-label {
		font-size: 24rpx;
		color: #666;
		margin-right: 15rpx;
	}
	
	.strength-bar {
		display: flex;
		gap: 6rpx;
		margin-right: 15rpx;
	}
	
	.strength-item {
		width: 30rpx;
		height: 6rpx;
		background: #e0e0e0;
		border-radius: 3rpx;
		transition: all 0.3s ease;
	}
	
	.strength-item.active {
		background: #667eea;
	}
	
	.strength-text {
		font-size: 24rpx;
		color: #667eea;
		font-weight: 600;
	}
	
	.result-container {
		text-align: center;
		padding: 60rpx 30rpx;
	}
	
	.result-icon {
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto 40rpx;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
		box-shadow: 0 15rpx 40rpx rgba(79, 172, 254, 0.3);
	}
	
	.result-icon.success {
		background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
		box-shadow: 0 15rpx 40rpx rgba(56, 239, 125, 0.3);
	}
	
	.icon-text {
		font-size: 60rpx;
		color: white;
	}
	
	.result-title {
		display: block;
		font-size: 44rpx;
		font-weight: 700;
		color: #2c3e50;
		margin-bottom: 20rpx;
	}
	
	.result-desc {
		display: block;
		font-size: 28rpx;
		color: #7f8c8d;
		line-height: 1.4;
		margin-bottom: 50rpx;
	}
	
	.button-group {
		display: flex;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.back-step-btn {
		flex: 1;
		background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
		border: none;
		border-radius: 20rpx;
		padding: 25rpx 0;
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		box-shadow: 0 10rpx 25rpx rgba(149, 165, 166, 0.3);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}
	
	.back-step-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s;
	}
	
	.back-step-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 10rpx 25rpx rgba(149, 165, 166, 0.3);
	}
	
	.back-step-btn:active::before {
		left: 100%;
	}
	
	.next-btn, .verify-btn, .confirm-btn, .back-login-btn {
		width: 100%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border: none;
		border-radius: 20rpx;
		padding: 25rpx 0;
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		box-shadow: 0 10rpx 25rpx rgba(102, 126, 234, 0.3);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;
	}
	
	.button-group .verify-btn,
	.button-group .confirm-btn {
		flex: 2;
		margin-bottom: 0;
	}
	
	.next-btn::before, .verify-btn::before, .confirm-btn::before, .back-login-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s;
	}
	
	.next-btn:not(.disabled):active, .verify-btn:not(.disabled):active, .confirm-btn:not(.disabled):active, .back-login-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 10rpx 25rpx rgba(102, 126, 234, 0.3);
	}
	
	.next-btn:not(.disabled):active::before, .verify-btn:not(.disabled):active::before, .confirm-btn:not(.disabled):active::before, .back-login-btn:active::before {
		left: 100%;
	}
	
	.next-btn.disabled, .verify-btn.disabled, .confirm-btn.disabled {
		opacity: 0.6;
		transform: none;
		background: linear-gradient(135deg, #a8a8a8 0%, #8a8a8a 100%);
	}
	
	.btn-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.loading-spinner {
		width: 32rpx;
		height: 32rpx;
		border: 3rpx solid rgba(255, 255, 255, 0.3);
		border-top: 3rpx solid white;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-right: 15rpx;
	}
	
	.login-prompt {
		text-align: center;
		margin-top: 40rpx;
	}
	
	.prompt-text {
		font-size: 28rpx;
		color: #6c757d;
		margin-right: 10rpx;
	}
	
	.login-link {
		font-size: 28rpx;
		color: #667eea;
		font-weight: 600;
		text-decoration: underline;
		cursor: pointer;
	}
	
	@keyframes float {
		0%, 100% { transform: translateY(0) rotate(0deg); }
		50% { transform: translateY(-30rpx) rotate(180deg); }
	}
	
	@keyframes rotate {
		from { transform: rotate(45deg); }
		to { transform: rotate(405deg); }
	}
	
	@keyframes pulse {
		0%, 100% { transform: scale(1); opacity: 0.7; }
		50% { transform: scale(1.1); opacity: 1; }
	}
	
	@keyframes bounce {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-20rpx); }
	}
	
	@keyframes slide {
		0%, 100% { transform: translateX(0); }
		50% { transform: translateX(30rpx); }
	}
	
	@keyframes shine {
		0% { transform: rotate(45deg) translateX(-200%); }
		50% { transform: rotate(45deg) translateX(200%); }
		100% { transform: rotate(45deg) translateX(200%); }
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style>
